// 变量定义

$theme-color: #39b54a!default;
$theme-color-text: #fff!default;
$theme-color-light: #d7f0db!default;
$theme-color-gradual1: #39b54a!default;
$theme-color-gradual2: #8dc63f!default;

$red: #e54d42;
$orange: #f37b1d;
$yellow: #fbbd08;
$olive: #8dc63f;
$green: #39b54a;
$cyan: #1cbbb4;
$blue: #0081ff;
$purple: #6739b6;
$mauve: #9c26b0;
$pink: #e03997;
$brown: #a5673f;
$grey: #aaa; // #8799a3;
$gray: #f0f0f0;
$black: #333;
$white: #fff;

$colors: ('theme', $theme-color, $theme-color-text, $theme-color-light, $theme-color-gradual1, $theme-color-gradual2),
('red', $red, $white, #fadbd9, #f43f3b, #ec008c),
('orange', $orange, $white, #fde6d2, #ff9700, #ed1c24),
('yellow', $yellow, $black, #fef2ce, #fbbd08, #fef2ce),
('olive', $olive, $white, #e8f4d9, #8dc63f, #e8f4d9),
('green', $green, $white, #d7f0db, #39b54a, #8dc63f),
('cyan', $cyan, $white, #d2f1f0, #1cbbb4, #d2f1f0),
('blue', $blue, $white, #cce6ff, #0081ff, #1cbbb4),
('purple', $purple, $white, #e1d7f0, #9000ff, #5e00ff),
('mauve', $mauve, $white, #ebd4ef, #9c26b0, #ebd4ef),
('pink', $pink, $white, #f9d7ea, #ec008c, #6739b6),
('brown', $brown, $white, #ede1d9, #a5673f, #ede1d9),
('grey', $grey, $white, #e7ebed, #8799a3, #e7ebed),
('gray', $gray, $black),
('black', $black, $white),
('white', $white, #666);

$position: '',
'-top',
'-right',
'-bottom',
'-left';

// 初始化

body {
    background-color: #f8f8f8;
    font-size: 28rpx;
    color: $black;
    font-family: Helvetica Neue, Helvetica, sans-serif;
    height: 100%;
}

/* #ifdef H5 */

uni-page-body {
    height: 100%;
}

/* #endif */

view,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator,
image {
    box-sizing: border-box;
}

::-webkit-scrollbar {
	width: 0;
	height: 0;
	background-color: transparent;
}

// 基础

.full {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}

.width-p100 {
    width: 100% !important;
}

.height-p100 {
    height: 100% !important;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.fixed-top {
    position: fixed;
    width: 100%;
    top: 0;
}

.fixed-bottom {
    position: fixed;
    width: 100%;
    bottom: 0;
}

.disabled {
    opacity: 0.6;
}

// 背景

@mixin bg($bg-color, $color: $white) {
    background: $bg-color;
    color: $color;
}

@each $k,
$v1,
$v2,
$v3,
$v4,
$v5 in $colors {
    .bg-#{$k} {
        @include bg($v1, $v2);
    }

    @if $v3 !='' {
        .bg-light-#{$k} {
            @include bg($v3, $v1);
        }
    }

    @if $v4 !='' {
        .bg-gradual-#{$k} {
            @include bg(linear-gradient(45deg, $v4, $v5), $v2);
        }
    }
}

.bg {
    &-img {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    &-mask {
        background-color: $black;
        position: relative;

        &::after {
            @extend .full;
            content: '';
            border-radius: inherit;
            background-color: rgba(0, 0, 0, 0.4);
        }

        view,
        cover-view {
            z-index: 5;
            position: relative;
        }
    }

    &-video {
        position: relative;

        video {
            @extend .full;
            object-fit: cover;
            z-index: 0;
            pointer-events: none;
        }
    }

    &-shadeTop {
        background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
        color: $white;
    }

    &-shadeBottom {
        background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
        color: $white;
    }
}

// 文本

.text- {

    @each $k,
    $v in $colors {
        &#{$k} {
            color: $v;
        }
    }

    &shadow {
        text-shadow: 6rpx 6rpx 8rpx;
    }

    @each $k,
    $v in ('xs', 20),
    ('sm', 24),
    ('df', 28),
    ('lg', 32),
    ('xl', 36),
    ('xxl', 44),
    ('sl', 80),
    ('xsl', 120) {
        &#{$k} {
            font-size: #{$v}rpx;
        }
    }

    &Abc {
        text-transform: Capitalize;
    }

    &ABC {
        text-transform: Uppercase;
    }

    &abc {
        text-transform: Lowercase;
    }

    &price::before {
        content: '¥';
        font-size: 80%;
        margin-right: 4rpx;
    }

    &cut {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    &bold {
        font-weight: bold;
    }

    &center {
        text-align: center;
    }

    &left {
        text-align: left;
    }

    &right {
        text-align: right;
    }
}

// 圆角/圆弧

$radius: ('radius', 10rpx),
('round', 10000rpx);

@each $r,
$v in $radius {
    .#{$r} {
        border-radius: $v;
    }

    .#{$r}-lt {
        border-top-left-radius: $v;
    }

    .#{$r}-rt {
        border-top-right-radius: $v;
    }

    .#{$r}-lb {
        border-bottom-left-radius: $v;
    }

    .#{$r}-rb {
        border-bottom-right-radius: $v;
    }
}

// 图片

image {
    max-width: 100%;
    display: inline-block;
    position: relative;
    z-index: 0;

    &.loading {
        &::before {
            @extend .full;
            content: '';
            background-color: #f5f5f5;
            z-index: -2;
        }

        &::after {
            @extend .full;
            content: '\e7f1';
            font-family: 'icon';
            z-index: -1;
            font-size: 32rpx;
            color: #ccc;
            animation: icon-spin 2s infinite linear;
        }
    }
}

// 边框

$border-style: 'solid',
'dashed';
$border-size: '',
's';

// @mixin border($pos, $color) {

// }

[class*='solid'],
[class*='dashed'] {
    position: relative;

    &::before {
        @extend .full;
        content: '';
        pointer-events: none;
        border-radius: inherit;
        box-sizing: border-box;
    }
}

@each $style in $border-style {
    @each $size in $border-size {
        @each $p in $position {
            .#{$style}#{$size}#{$p}::before {
                @if $size==s {
                    border#{$p}: #{$style} 6rpx rgba(#000, 0.1);
                }

                @else {
                    border#{$p}: #{$style} 2rpx rgba(#000, 0.1);
                }
            }

            @each $k,
            $v in $colors {
                .#{$style}#{$size}#{$p}-#{$k}::before {
                    @if $size==s {
                        border#{$p}: #{$style} 6rpx $v;
                    }

                    @else {
                        border#{$p}: #{$style} 2rpx $v;
                    }
                }
            }
        }
    }
}

// 阴影

.shadow {
    box-shadow: 6rpx 6rpx 8rpx;

    &-wrap {
        box-shadow: 0 0 10rpx;
    }

    @each $k,
    $v in $colors {
        &-#{$k} {
            box-shadow: 6rpx 6rpx 8rpx rgba($v, 0.5);
        }

        &-wrap-#{$k} {
            box-shadow: 0 0 10rpx rgba($v, 0.5);
        }
    }
}

// flex布局

.flex {
    display: flex;

    &-inline {
        display: inline-flex;
    }
	
	&-reverse {
		flex-direction: row-reverse;
	}

    &-col {
        flex-direction: column;
		&-reverse {
			flex-direction: column-reverse;
		}
    }

    &-wrap {
        flex-wrap: wrap;
    }

    &-sub {
        flex: 1;
    }

    &-twice {
        flex: 2;
    }

    &-treble {
        flex: 3;
    }
}

.basis {
    &-xs {
        flex-basis: 20%;
    }

    &-sm {
        flex-basis: 40%;
    }

    &-df {
        flex-basis: 50%;
    }

    &-lg {
        flex-basis: 60%;
    }

    &-xl {
        flex-basis: 80%;
    }
}

.align {
    &-start {
        align-items: flex-start;
    }

    &-end {
        align-items: flex-end;
    }

    &-center {
        align-items: center;
    }

    &-baseline {
        align-items: baseline;
    }
}

.self {
    &-start {
        align-self: flex-start;
    }

    &-end {
        align-self: flex-end;
    }

    &-center {
        align-self: center;
    }

    &-baseline {
        align-self: baseline;
    }

    &-stretch {
        align-self: stretch;
    }
}

.justify {
    &-end {
        justify-content: flex-end;
    }

    &-center {
        justify-content: center;
    }

    &-between {
        justify-content: space-between;
    }

    &-around {
        justify-content: space-around;
    }
}

// grid布局

.grid {
    display: flex;
    flex-wrap: wrap;

    &.grid-square {
        overflow: hidden;

        >view {
            margin-right: 20rpx;
            margin-bottom: 20rpx;
            border-radius: 6rpx;
            position: relative;
            overflow: hidden;

            &.bg-img image {
                width: 100%;
                height: 100%;
                position: absolute;
            }
        }

        @for $i from 1 to 6 {
            &.col-#{$i}>view {
                padding-bottom: calc((100% - 20rpx * (#{$i} - 1)) / #{$i});
                height: 0;
                width: calc((100% - 20rpx * (#{$i} - 1)) / #{$i});

                @if $i !=1 {
                    &:nth-child(#{$i}n) {
                        margin-right: 0;
                    }
                }
            }
        }
    }

    @for $i from 1 to 6 {
        &.col-#{$i}>view {
            width: 100% / $i;
        }
    }
}

// 浮动

.cf {

    &::after,
    &::before {
        content: ' ';
        display: table;
    }

    &::after {
        clear: both;
    }

    .fl {
        float: left;
    }

    .fr {
        float: right;
    }
}

// 内外边距

$mp-type: 'margin',
'padding';
$mp-size: ('-0', 0),
('-xs', 10),
('-sm', 20),
('', 30),
('-lg', 40),
('-xl', 50);

@each $type in $mp-type {

    @each $size,
    $v in $mp-size {
        @each $pos in $position {
            .#{$type}#{$pos}#{$size} {
                #{$type}#{$pos}: #{$v}rpx;
            }
        }

        .#{$type}-tb#{$size} {
            @extend .#{$type}-top#{$size};
            @extend .#{$type}-bottom#{$size};
        }

        .#{$type}-lr#{$size} {
            @extend .#{$type}-left#{$size};
            @extend .#{$type}-right#{$size};
        }
    }
}

// 透明度
@for $i from 1 through 9 {
    .opacity-#{$i} {
        opacity: $i * 0.1;
    }
}

// 动画

$ani-name: 'fade',
'scale-up',
'scale-down',
'slide-top',
'slide-bottom',
'slide-left',
'slide-right',
'shake',
'spin',
'pulse';

[class*='ani-'] {
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

.ani- {
    @each $n in $ani-name {
        &#{$n} {
            animation-name: $n;

            @if $n==fade {
                animation-duration: 0.8s;
                animation-timing-function: linear;
            }
			
            @if $n==spin {
                animation-duration: 2s;
                animation-timing-function: linear;
				animation-iteration-count: infinite;
            }
			
            @if $n==pulse {
				animation-name: 'spin';
                animation-duration: 1s;
                animation-timing-function: steps(8);
				animation-iteration-count: infinite;
            }
        }
    }

    &reverse {
        animation-direction: reverse;
    }
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes scale-up {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scale-down {
    0% {
        opacity: 0;
        transform: scale(1.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slide-top {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-bottom {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-9px);
    }

    20% {
        transform: translateX(8px);
    }

    30% {
        transform: translateX(-7px);
    }

    40% {
        transform: translateX(6px);
    }

    50% {
        transform: translateX(-5px);
    }

    60% {
        transform: translateX(4px);
    }

    70% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(2px);
    }

    90% {
        transform: translateX(-1px);
    }
}

@keyframes slide-left {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-right {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(359deg);
    }
}

// 父子组件样式

// 头像组
.avatar-group .avatar {
    margin-left: -30rpx !important;
    border: 2rpx solid #f1f1f1;
    vertical-align: middle !important;
}

.avatar-group .avatar.sm {
    margin-left: -20rpx !important;
}

.avatar-group .avatar.lg {
    margin-left: -45rpx !important;
}

.avatar-group .avatar.xl {
    margin-left: -60rpx !important;
}

// 其它

.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.rotate-270 {
    transform: rotate(270deg);
}

.flip-horizontal {
    transform: scale(-1, 1);
}

.flip-vertical {
    transform: scale(1, -1);
}